<template>
	<view class="content">
		<view class="feedback">
			<uni-forms labelPosition="top" labelWidth="auto" :modelValue="form" :rules="rules" ref="form">
				<uni-forms-item label="问题或意见" name="content" required>
					<uni-easyinput type="textarea" v-model="form.content" placeholder="请填写问题描述或者意见建议内容"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="问题截图(最多9张)" name="imgs" required>
					<view class="module-image">
						<view class="image_view" v-for="(item, index) in ablumList" :key="index"
							v-if="ablumList.length > 0">
							<image :src="item" class="release_img" @click="previewImg(index)"></image>
							<view class="img_delete center-algin" @click="deleteImg(index)"><text
									class="text-white text-size-base text-color-inverse">X</text></view>
						</view>
						<view class="release_img center-algin release_img_dottedLine" @click="uploadImgs()"
							v-if="ablumList.length < 9"><text class="text-grey">+</text></view>
					</view>
				</uni-forms-item>
				<!-- <text class="tips">温馨提示：选填，可以提供问题截图</text> -->
				<uni-forms-item label="联系方式" name="mobile">
					<uni-easyinput placeholder="方便我们联系您" type="number" v-model="form.mobile" prefixIcon="phone-fill"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom"><button class="throttle" @tap="btnAClick">提交</button></view>
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile';
	export default {
		data() {
			return {
				imgList: [],
				ablumList: [],
				fileList1: [],
				form: {
					content: null,
					imgs: '',
					contact: '',
					mobile: ''
				},

				modalShow: false,
				modalTitle: '温馨提示',
				modalContent: '提交成功，我们会尽快处理您的问题或者建议！',

				rules: {
					content: {
						rules: [{
							required: true,
							errorMessage: '请填写问题或建议',
						}],
						validateTrigger:'submit'
					},
					// mobile: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写联系方式',
					// 	}],
					// 	validateTrigger:'submit'
					// },
				}
			};
		},
		onLoad() {},

		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},

		methods: {
			// 选择图片
			uploadImg() {
				let that = this;
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile();
					}
				});
			},

			// 上传图片
			uploadFile() {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl, 'wp/user/', result => {
					console.log('图片上传结果：', result);
					this.company.logo = result;
					uni.hideLoading();
				});
			},

			// 选择图片
			uploadImgs() {
				if (this.disabled) {
					return;
				}
				let that = this;
				this.cover = '';
				uni.chooseImage({
					count: 9 - that.ablumList.length,
					success(res) {
						console.log(res);
						console.log(res.tempFiles);
						let tmpFiles = res.tempFiles;
						let data = that.imgList;
						if (data.length < 9) {
							for (var i = 0; i < tmpFiles.length; i++) {
								data.push(tmpFiles[i].path);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '最多只能有九张图片'
							});
							return;
						}
						that.imgList = data;
						that.uploadFiles();
					}
				});
			},

			// 上传图片
			uploadFiles() {
				uni.showLoading();
				for (var i in this.imgList) {
					uploadImage(0, this.imgList[i], 'planer/', result => {
						// console.log('图片上传结果：', result);
						// this.imageUrl = result;
						this.ablumList.push(result);

						if (this.imgList.length == this.ablumList.length) {
							// 图片上传完调用提交帖子
							// this.addPost();
						}
					});
				}
				this.imgList = [];
				uni.hideLoading();
				console.log('ablumList===', this.ablumList);
			},

			// 查看图片
			previewImg(index) {
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: this.ablumList[index],
					urls: this.ablumList
				});
			},

			// 删除图片
			deleteImg(index) {
				if (this.mediaType == 0) {
					this.ablumList.splice(index, 1);
					// this.imgList.splice(index, 1);
				} else {
					this.imgList = [];
					this.mediaType = 0;
					this.$forceUpdate();
				}
			},

			btnAClick() {
				console.log('btnClick');
				let that = this;
				this.$refs.form
					.validate()
					.then(res => {
						console.log("res===", res)
						if (this.ablumList.length == 0) {
							uni.showToast({
								icon:'none',
								title:'请上传问题截图'
							})
							return;
						}
						uni.showModal({
							title: '温馨提示',
							content: '确定提交意见反馈？',
							success: res => {
								if (res.confirm) {
									that.addRequire();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					})
					.catch(errors => {
						console.log("校验失败：",errors)
						uni.showToast({
							icon: 'none',
							title: '校验失败'
						})
					});
			},

			async addRequire() {
				if (this.ablumList.length > 0) {
					this.form.imgs = this.ablumList.join(',');
				}
				let res = await this.$apis.addFeedback(this.form);
				console.log(res);
				if (res) {
					uni.navigateBack();
				}
			},

			modalConfirm() {
				this.show = false;
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.feedback {
		padding: 20upx;
		padding-bottom: 200upx;

		.title {
			text-align: center;
			width: 100%;
			border-bottom: 1upx solid #dadbde;
			padding: 20upx;

			text {
				font-weight: bold;
			}
		}

		.tips {
			font-size: 26upx;
			color: #999;
			margin-bottom: 10upx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		background: #f8f8f8;
		z-index: 99;
		border-top: 1upx solid #dadbde;

		.throttle {
			width: 94%;
			margin: 10upx auto;
			background-color: #007aff;
			color: #ffffff;
		}
	}

	.module-image {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;

		view {
			display: flex;
		}
	}

	.release_img {
		width: 220upx;
		height: 220upx;
		margin-left: 20upx;
		margin-bottom: 10upx;
	}

	.release_img_dottedLine {
		border: 1px dashed rgba(138, 138, 138, 1);
	}

	.release_img text {
		font-size: 50upx;
	}

	.release_img2 {
		width: 700upx;
		height: 450upx;
		margin-left: 20upx;
		margin-bottom: 10upx;
	}

	.image_view {
		position: relative;
	}

	.image_view2 {
		position: relative;
		width: 94%;
		margin: 0 3%;
	}

	.img_delete {
		width: 45upx;
		height: 45upx;
		border-radius: 50%;
		background: rgba(234, 178, 178, 0.5);
		position: absolute;
		right: -15upx;
		top: -15upx;
		z-index: 10;
	}

	.release-bottom {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>